﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
    <link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
    <link href="~/Css/css.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.jqprint-0.3.js"></script>
    <script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

    <script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/echarts.common.min.js"></script>
</head>
        <script type="text/javascript">

            $(function () {
                $("#shopName").combobox({
                    url: '/SupportNumShelf/GetShop',
                    valueField: "shopID",
                    textField: "shopName"
                });
            })
        </script>

    <script type="text/javascript">
        function searchData() {

            var start = $("#txtDate1").datebox('getValue');
            var end = $("#txtDate2").datebox('getValue');

            if (txtDate1.value > txtDate2.value) {

                alert("开始日期不能大于截至日期！");
                $("#txtDate2").datebox('setValue', "");//根据ID清空    

                txtDate1.focus();
                txtDate2.focus();
                return false;
            }
            else {
                $.post("/LevelConsumChart/GetOrderAll?storeid=" + $('#shopName').val() + '&date2=' + $('#txtDate2').val() + '&date1=' + $('#txtDate1').val() ,
            function (result) {
              
                var dataArray = [];
                var levelName = [];
                var rate = [];
                console.log(result);
                //请求成功时执行该函数内容，result即     为服务器返回的json对象       
              
                $.each(result, function (index, item) {

                    levelName.push(item.name);
                });

                //date = date.reverse();
                //SaleMoney = SaleMoney.reverse();
                // console.log(dataArray);
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                var  option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: levelName    //['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']//图标注释
                    },
                    series: [
                        {
                            name: '消费水平',
                            type: 'pie',
                            radius: ['30%', '55%'],
                            label: {
                                normal: {
                                     
                                    //formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}}   ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    shadowBlur:3,
                                    shadowOffsetX: 2,
                                    shadowOffsetY: 2,
                                    shadowColor: '#999',
                                    padding: [0, 7],
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },                       
                                        hr: {
                                            borderColor: '#aaa',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        },
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                },
                            },
                            data: result
                        }
                    ]
                };
                myChart.setOption(option);
            }
            )
            }
           
      }
</script>

<body class="" style="width: 100%; height: 100%">

    <div id="tool" style="padding-left: 100px; margin-top: 20px">
        <p><span style="font-size: larger; color: brown; margin-top: initial;">请选择起始日期进行统计:</span></p>
        <input id="txtDate1" type="text" class="easyui-datebox" />
        ---
                <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
         选择店铺：  <input id="shopName" class="easyui-combobox" name="shopName"  />
                        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                  <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">统计</a>
        <span style="font-size: larger; color: red">&nbsp&nbsp&nbsp  默认是所有店铺总的消费水平 &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  </span>
    </div>

    <div style="width: 900px; height: 600px; margin-left: 80px; margin-top: 20px; float: left" id="main">
    </div>

    <script type="text/javascript">
        $.post('/LevelConsumChart/GetOrderAll',
          function (result) {
              
              var dataArray = [];
              var levelName = [];
              var rate = [];
              console.log(result);
              //请求成功时执行该函数内容，result即     为服务器返回的json对象       
              
              $.each(result, function (index, item) {

                  levelName.push(item.name);
              });

              //date = date.reverse();
              //SaleMoney = SaleMoney.reverse();
             // console.log(dataArray);
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));

              var  option = {
                  tooltip: {
                      trigger: 'item',
                      formatter: "{a} <br/>{b}: {c} ({d}%)"
                  },
                  legend: {
                      orient: 'vertical',
                      x: 'left',
                      data: levelName    //['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']//图标注释
                  },
                  series: [
                      {
                          name: '消费水平',
                          type: 'pie',
                          radius: ['30%', '55%'],
                          label: {
                              normal: {
                                     
                                  //formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}}   ',
                                  backgroundColor: '#eee',
                                  borderColor: '#aaa',
                                  borderWidth: 1,
                                  borderRadius: 4,
                                  shadowBlur:3,
                                  shadowOffsetX: 2,
                                  shadowOffsetY: 2,
                                  shadowColor: '#999',
                                  padding: [0, 7],
                                  rich: {
                                      a: {
                                          color: '#999',
                                          lineHeight: 22,
                                          align: 'center'
                                      },                       
                                      hr: {
                                          borderColor: '#aaa',
                                          width: '100%',
                                          borderWidth: 0.5,
                                          height: 0
                                      },
                                      b: {
                                          fontSize: 16,
                                          lineHeight: 33
                                      },
                                      per: {
                                          color: '#eee',
                                          backgroundColor: '#334455',
                                          padding: [2, 4],
                                          borderRadius: 2
                                      }
                                  }
                              },
                          },
                          data: result
                      }
                  ]
              };
              myChart.setOption(option);
              }
                )   
    </script>
</body>
</html>





